<template>
  <div class="rights">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/Home">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
      </el-breadcrumb>
    <div class="box">
      <el-card class="box-card">
        <el-table
            :data="tableData"
            border
            style="width: 100%">
          <el-table-column
              type="index"
              label="#"
              width="50px">
          </el-table-column>
          <el-table-column
              prop="authName"
              label="权限名称"
          >
          </el-table-column>
          <el-table-column
              prop="path"
              label="路径"
          >
          </el-table-column>
          <el-table-column
              prop="level"
              label="权限等级"
          >
            <template slot-scope="scope">
              <el-tag size="mini" :type="code[scope.row.level]">{{scope.row.level | Code}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>

</template>
<script>
import {tables} from '@/utils/api'

export default {
  name: '',
  props: {},
  data() {
    return {
      lists: 'list',
      tableData: [],
      code:['primary','success','warning']
    };
  },
  // 子组件转换
  components: {},
  // 数据引入 created
  created() {
    this.tab()
  },
  mounted() {
  },
  //点击函数事件
  methods: {
    async tab() {
      const res = await tables(this.lists)
      this.tableData = res
    }
  },
  //计算事件
  computed: {},
  //数据监听
  watch: {},
  //过滤器
  filters: {},
  //设定自定义指令
  directives: {},
}
</script>
<style lang="scss" scoped>
.box{
  width:100%;
  height: 87vh;
  overflow-y: auto;
}
/deep/{
  .el-breadcrumb {
    font-size: 14px;
    line-height: 1;
    margin-bottom: 20px;
  }
  .box-card{
    width: 99%;
  }
}
.rights{
  width: 100%;
}
</style>